<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>imgDetail</title>
    <link rel="stylesheet" href="../src/iswiper/swiper-4.1.6.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/imgDetail.css">
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../images/teq_01.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/teq_02.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/teq_03.png" alt="">
            </div>
        </div>

        <div class="swiper-pagination"></div>

        <!-- 描述文字 -->
        <div class="desc">
            <div class="item">
                <p class="title">标题一</p>
                <p class="word">介绍文字一介绍文字一介绍文字一介绍文字一介绍文字一</p>
            </div>
            <div class="item">
                <p class="title">标题二</p>
                <p class="word">介绍文字二介绍文字二介绍文字二介绍文字二介绍文字二</p>
            </div>
            <div class="item">
                <p class="title">标题三</p>
                <p class="word">介绍文字三介绍文字三介绍文字三介绍文字三介绍文字三</p>
            </div>
        </div>
    </div>
    <script src="../src/jquery-1.11.3.min.js"></script>
    <script src="../src/iswiper/swiper-4.1.6.min.js"></script>

    <script>
    var mySwiper = new Swiper('.swiper-container', {
        //autoplay: true//可选选项，自动滑动
        // pagination: {
        //     el: '.swiper-pagination',
        // },
        on: {
            slideChangeTransitionEnd: function(){
                //console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
                var ind=this.activeIndex;
                $(".swiper-container .desc .item").each(function(i,e){
                    $(e).css("display","none");
                })
                //console.log($(".swiper-container .desc .item").eq(ind));
                $(".swiper-container .desc .item").eq(ind).css("display","block");
            },
        }
    })
    </script>
</body>
</html>